<template>
	<view style="position: relative;">
		
		<view class="navBar" :style="{top:safeAreaTopHeight}" @click="back">
			<image class="navBar-back-image" src="../../static/navBar/navBar_back_white.png" mode="aspectFit"></image>
			<view class="navBar-back-text util-font-medium">商家确认</view>
		</view>
		
		<view class="content-view" :style="{marginTop:safeAreaTopHeight}">
			<image class="mer-pic" :src="data.merMerchant.pic" mode="aspectFill"></image>
			<view class="product-name util-font-medium">{{data.merProduct.name}}</view>
			<image class="code-image" :src="codeimgurl" mode="aspectFit"></image>
			<view class="merchant-name util-font-medium">{{data.merMerchant.name}}</view>
			<view class="code-view util-font-medium">
				<text class="code-text1">消费码：</text>
				<text class="code-text2">{{code}}</text>
			</view>
			<view class="time-view util-font-regular">
				<view class="time-text1">有效期：</view>
				<view class="time-text2">{{data.merProduct.startVerifyTime + ' 至 ' + data.merProduct.endVerifyTime}}</view>
			</view>
		</view>
		<view class="tips-view util-font-regular">
			——	请向店员出示该二维码	——
		</view>
		
	</view>
</template>

<script>
	export default {
		computed: {
			safeAreaTopHeight(){
				return (this.$util.systemRect().safeAreaTopHeight * 2) + 'rpx'
			}
		},
		data() {
			return {
				oid: '',
				index: '',
				data: null,
				code: '',
				codeimgurl: '',
				
			}
		},
		onLoad(options) {
			var that = this
			that.oid = options.oid
			
			that.loadData()
		},
		methods: {
			loadData: function(refresh) {
				var that = this
				that.sendRequest({
					url: 'app/ordOrders/info/' + that.oid,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: res => {
						console.log(res)
						that.data = res.data.data
						that.code = that.insertStr(that.insertStr(that.data.verifyCode+'', 6, " "), 3," ")
						
						var page = encodeURIComponent("pages/index/index")
						var data = {"CODE":that.data.verifyCode}
						that.codeimgurl = that.$baseUrl + "app/common/getUnlimitCode/" + uni.getStorageSync('appId') + "?page=" + page + "&scene=" + that.$util.JSEncode(JSON.stringify(data))
						console.log(that.codeimgurl)
					},
				})
			},
			insertStr : function(soure, start, newStr){
				
				console.log(soure + '***' + start + '***' + newStr)
				
			   return soure.slice(0, start) + newStr + soure.slice(start);
			},
			back: function(){
				uni.navigateBack({
					
				})
			},
			
		}
	}
</script>

<style>
	page {
		background-image: url("https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/order_code_view_bg.png");
		background-size: cover;
		background-attachment: fixed;
	}
	
	/* 导航栏 */
	.navBar {
		position: fixed;
		height: 88rpx;
	}
	.navBar-back-image {
		width: 30rpx;
		height: 30rpx;
		margin: 29rpx 15rpx;
		float: left;
	}
	.navBar-back-text {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 34rpx;
		color: white;
		float: left;
	}
	
	.content-view {
		width: 750rpx;
		height: 1104rpx;
		padding-top: 88rpx;
		text-align: center;
		background-image: url(https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/order_code_bg.png);
		background-size: 690rpx 1030rpx;
		background-position: 30rpx 162rpx;
		background-repeat: no-repeat;
	}
	
	.mer-pic {
		width: 140rpx;
		height: 140rpx;
		border: 4rpx solid #FFFFFF;
		border-radius: 74rpx;
	}
	
	.product-name {
		width: 500rpx;
		height: 40rpx;
		line-height: 40rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		margin-left: 125rpx;
		font-size: 34rpx;
		margin-top: 20rpx;
	}
	.code-image {
		width: 400rpx;
		height: 400rpx;
		margin-top: 150rpx;
		background: url(../../static/loading.gif) no-repeat center;
		position: relative;
		background-size: 150rpx 150rpx;
	}
	
	.merchant-name {
		margin-top: 50rpx;
		font-size: 34rpx;
	}
	
	.code-view {
		width: 600rpx;
		height: 94rpx;
		line-height: 94rpx;
		background-color: #fdf6f1;
		margin-left: 75rpx;
		border: 2rpx solid #f5c29c;
		border-radius: 10rpx;
		font-size: 36rpx;
		margin-top: 25rpx;
	}
	.code-text1 {
		color: #571815;
	}
	.code-text2 {
		color: #e75a28;
	}
	
	.time-view {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	
	.tips-view {
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #dddddd;
	}
	
</style>
